<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="<?=TPL_PATH?>css/app.min.css">
    <title>迅达厨电</title>
</head>
<body>
    <div style="display:none;">
        <img src="http://xunda.moredesignstudio.cn/app_h5/tpl/images/icon.jpg">
    </div>
    <div style="display: none;">
        <audio src="<?=TPL_PATH?>images/empty.mp3" preload="metadata" id="shake-sound"></audio>
        <audio src="<?=TPL_PATH?>images/bg_music.mp3" preload="metadata" autoplay id="bg-music" loop></audio>
    </div>
    <div class="page page-rule">
        <a href="#" class="close"></a>
        <img src="<?=TPL_PATH?>images/rule.jpg" alt="">
        <div class="btn-group rule-btn-group">
            <a href="#" class="btn start-btn">
                <img src="<?=TPL_PATH?>images/start.png" alt="">
            </a>
        </div>
    </div>

    <div class="page page-finger"></div>

    <div class="page page-enter">
        <div class="logo">
            <img src="<?=TPL_PATH?>images/logo.png" alt="">
        </div>
        <div class="page-enter-upload">
            <img src="<?=TPL_PATH?>images/upload.jpg" alt="">
        </div>
        <div class="page-enter-bottom">
            <img src="<?=TPL_PATH?>images/upload_bottom.png" alt="">
        </div>

        <div class="upload-area">
            <div class="upload-image"></div>
            <div class="upload-input">
                <div style="display: none;">
                    <input type="file" id="upload">
                </div>
            </div>
            <span class="upload-area-tips">点击上传图片</span>
        </div>
        
        <div class="page-enter-text-container">
            <div class="page-enter-text">
                <img src="<?=TPL_PATH?>images/upload_text.png" alt="">
                <span class="generate-city enter-city"></span>
            </div>
        </div>
        <div class="page-enter-input text-input">
            <input type="text" id="city" placeholder="请输入您所在的城市">
        </div>
        <div class="page-enter-btn-group btn-group">
            <a href="#" class="rule-btn btn">
                <img src="<?=TPL_PATH?>images/rule_btn.png" alt="">
            </a>
            <a href="#" class="btn create-btn">
                <img src="<?=TPL_PATH?>images/create_btn.png" alt="">
            </a>
        </div>
    </div>

    <div class="page page-shake">
        <div class="shake-content">
            <div class="shake-hand-group-container">
                <div class="shake-hand-group">
                    <div class="shake-hand">
                        <img src="<?=TPL_PATH?>images/shake_hand.png" alt="">
                    </div>
                    <div class="shake-hand">
                        <img src="<?=TPL_PATH?>images/shake_hand.png" alt="">
                    </div>
                    <div class="shake-hand">
                        <img src="<?=TPL_PATH?>images/shake_hand.png" alt="">
                    </div>
                </div>
            </div>
            <img src="<?=TPL_PATH?>images/shake.png" alt="">
        </div>
    </div>

    <div class="page page-thanks">
        <div class="thanks-img">
            <img src="<?=TPL_PATH?>images/thanks.jpg" alt="">
        </div>
        <div class="btn-group">
            <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MjM5MzEzMzY2Mw==#wechat_redirect" class="btn">
                <img src="<?=TPL_PATH?>images/guangzhu_btn.png" alt="">
            </a>
            <a href="#" class="btn back-btn">
                <img src="<?=TPL_PATH?>images/back_btn.png" alt="">
            </a>
        </div>
    </div>

    <div class="page page-win">
        <div class="win-img">
            <img src="<?=TPL_PATH?>images/win.jpg" alt="">
        </div>
        <div class="win-input-group clearfix">
            <div class="win-input input-name">
                <div class="text-input"><input type="text" id="name" placeholder="输入姓名"></div>
            </div>
            <div class="win-input input-phone">
                <div class="text-input"><input type="text" id="phone" placeholder="输入电话"></div>
            </div>
        </div>
        <div class="win-input input-address">
            <div class="text-input"><input type="text" id="address" placeholder="请输入奖品收件地址"></div>
        </div>

        <div class="btn-group win-btn-group">
            <a href="#" class="btn confirm-btn">
                <img src="<?=TPL_PATH?>images/confirm_btn.png" alt="">
            </a>
        </div>
    </div>

    <div class="page page-success">
        <div class="success-img">
            <img src="<?=TPL_PATH?>images/success.png" alt="">
        </div>
        <div class="btn-group">
            <a href="#" class="btn share-btn">
                <img src="<?=TPL_PATH?>images/share_btn.png" alt="">
            </a>
            <a href="#" class="btn back-btn">
                <img src="<?=TPL_PATH?>images/back_btn.png" alt="">
            </a>
        </div>
    </div>

    <div class="page page-create">
        <img src="" alt="" id="page-create-img">
        <div class="btn-group create-btn-group">
            <a href="#" class="btn fuli-btn">
                <img src="<?=TPL_PATH?>images/fuli_btn.png" alt="">
            </a>
        </div>
    </div>

    <div class="page-generate page">
        <div id="generate">
            <div style="position: absolute; right: 20px; top: 14px; width: 240px; z-index: 9;">
                <img src="<?=TPL_PATH?>images/logo.png" alt="">
            </div>
            <div style="position: absolute; top: 0; left: 0; width: 640px; padding-top: 81px; ">
                <div id="generate-upload-img" style="position:absolute;width:382px; height: 382px; margin-left: -191px; left: 50%; overflow:hidden;z-index:998; border-radius:50%; background-size: cover; background-position: center;">
                </div>
            </div>

            <div style="width:640px;position:absolute;top:0;left:0">
                <img src="<?=TPL_PATH?>images/upload.jpg" alt="" style="width: 100%; display: block;">
            </div>
            <div style="width:640px; height: 350px; position:absolute;bottom:0;left:0;">
                <img src="<?=TPL_PATH?>images/upload_bottom.png" alt="" style="width: 640px; height: 350px; display: block;">
            </div>
            <div style="width:140px; height: 140px; position:absolute;bottom:40px;right:20px; z-index: 999;">
                <img src="<?=TPL_PATH?>images/qrcode.png" alt="" style="width:140px; height: 140px; display: block;">
            </div>

            <div style="padding-top:516px;position:absolute;top:0;left:0;width:640px">
                <div style="position:relative;width:439px;height: 179px;margin:auto">
                    <img src="<?=TPL_PATH?>images/upload_text.png" alt="" style=";width:439px;height: 179px;display: block;">
                    <span id="generate-city-text" style="position:absolute;width:100%;left:0;top:1%;text-align:center;font-size:48px;color:#fff"></span>
                </div>
                <div style="background-image:url(<?=TPL_PATH?>images/number.png);background-size:100%;margin-top:39px;width:100%;height:96px;color:#fff;font-size:28px;line-height:96px;text-align:center" id="user-id">
                </div>
            </div>
        </div>
    </div>

    <div class="page share-page">
        <div class="share-tips">
            <img src="<?=TPL_PATH?>images/share.png" alt="">
        </div>
    </div>

    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="<?=TPL_PATH?>js/lib/rem.js"></script>
    <script src="<?=TPL_PATH?>js/lib/jquery-3.3.1.min.js"></script>
    <script src="<?=TPL_PATH?>js/lib/html2canvas.min.js"></script>
    <script src="<?=TPL_PATH?>js/lib/shake.js"></script>
    <script src="<?=TPL_PATH?>js/app.js"></script>
    <div style="display: none">
        <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?e8c7f6b07af92e9959b31f847084f80f";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script>
    </div>
</body>
</html>